<script setup>
import {ref, onMounted, watch} from "vue"
import AccountInformation from "@/components/setUp/AccountInformation.vue";
import ContactInformation from "@/components/setUp/ContactInformation.vue";
import AccountSecurity from "@/components/setUp/AccountSecurity.vue";
import {useUser} from "@/store/useUser";

const userStore = useUser()
const menuIndex = ref(0)
const menuChange = (index) => {
	menuIndex.value = index
}

const userInfo = ref({})
onMounted(()=>{
  userInfo.value = userStore.getUserInfo
})

watch(() => userStore.getUserInfo, (newValue, oldValue)=>{
  userInfo.value = newValue
})
</script>

<template>
	<div class="body">
		<div class="set-up">
			<div class="left">
				<span :class="{active: menuIndex === 0}" @click="menuChange(0)">账号信息</span>
				<span :class="{active: menuIndex === 1}" @click="menuChange(1)">联系方式</span>
				<span :class="{active: menuIndex === 2}" @click="menuChange(2)">账号与安全</span>
			</div>
			<div class="right">
				<AccountInformation v-if="menuIndex === 0" :userInfo="userInfo"/>
				<ContactInformation v-if="menuIndex === 1" :userInfo="userInfo"/>
				<AccountSecurity  v-if="menuIndex === 2" :userInfo="userInfo"/>
			</div>
		</div>
	</div>
</template>

<style scoped lang="scss">
.body{
	padding-top: 80px;
	background: #F9F9F9;
}
.set-up{
	width: 1100px;
	margin: 0 auto;
	display: flex;
	padding-top: 32px;
	padding-bottom: 36px;
	.left{
		flex: 0 0  200px;
		height: 160px;
		display: flex;
		flex-direction: column;
		background: #FFFFFF;
		box-shadow: 0px 0px 16px 0px rgba(11,13,18,0.06);
		border-radius: 16px 16px 16px 16px;
		border: 1px solid rgba(25,30,40,0.08);
		padding: 28px 24px;
		margin-right: 24px;
		box-sizing: border-box;
		span{
			font-size: 16px;
			color: #191E28;
			margin-bottom: 18px;
			cursor: pointer;
			&:last-child{
				margin-bottom: 0;
			}
			&.active{
				color: #1DBF73;
				font-weight: bold;
				position: relative;
				&:before{
					content: '';
					position: absolute;
					width: 3px;
					height: 30px;
					background: #1DBF73;
					top: 50%;
					margin-top: -15px;
					left: -24px;
				}
			}
		}
	}
	.right{
		flex: 1;
		background: #FFFFFF;
		box-shadow: 0px 0px 16px 0px rgba(11,13,18,0.06);
		border-radius: 16px 16px 16px 16px;
		border: 1px solid rgba(25,30,40,0.08);
	}
}
</style>